<template>
  <div class="app-container">
    <div style="width: 100%;height: 150px;display: flex;justify-content: center;align-items: center">
      <div class="card-text">
        <el-image style="width: 40px; height: 40px" :src="require('@/assets/jibi.png')"></el-image>
        <span style="font-size: 18px">应收积分</span>
        <span style="font-size: 24px;color: #1890FF">{{ datalist.totalGain }}</span>
      </div>
      <div class="card-text" style="margin-left: 200px">
        <el-image style="width: 40px; height: 40px" :src="require('@/assets/fz.png')"></el-image>
        <span style="font-size: 18px">应付积分</span>
        <span style="font-size: 24px;color: #1890FF">{{ datalist.totalPay }}</span>
      </div>
    </div>
    <div style="background-color: #FFFFFF">
      <div style="display: flex;justify-content: space-between">
        <div style="display: flex">
          <div :class="flag ? 'botten-no' : 'botten-yes'" @click="getfalg(1)">应收账单</div>
          <div :class="flag ? 'botten-yes' : 'botten-no'" @click="getfalg(2)">应付账单</div>
        </div>
        <div style="display: flex">
<!--          <div style="width: 150px">-->
<!--            <el-cascader :options="gridList" v-model="form.cityId" placeholder="请选择站点"-->
<!--              :props="{ value: 'cityId', label: 'name', children: 'child' }" @keyup.enter.native="handleQuery"-->
<!--              size="medium" filterable style="width: 100%"></el-cascader>-->
<!--          </div>-->
          <div style="width: 150px">
            <el-date-picker style="width: 150px" v-model="form.yearMonth" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
          <div>
            <el-button type="warning" plain icon="el-icon-plus" size="medium" @click="handle"
              v-hasPermi="['user:management:add']">导出
            </el-button>
          </div>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="180">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="countyName" label="县区">
        </el-table-column>
        <el-table-column prop="totalPoint" label="积分额">
        </el-table-column>
        <el-table-column prop="yearMonth" label="账单月份">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small">
              查看明细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total > 0" :total="total" :page.sync="form.current" :limit.sync="form.size"
      @pagination="getlist"/>
    <!--  弹出框  -->
    <el-dialog title="账单详情" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column type="index" label="序号" width="80">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column property="name" label="县区" width="200"></el-table-column>
        <el-table-column property="address" label="兑换人"></el-table-column>
        <el-table-column property="date" label="兑换商品" width="150"></el-table-column>
        <el-table-column property="name" label="积分" width="100"></el-table-column>
        <el-table-column property="address" label="兑换日期"></el-table-column>
        <el-table-column property="date" label="提货日期" width="150"></el-table-column>
      </el-table>
      <pagination v-show="detailtotal > 0" :total="detailtotal" :page.sync="detail.current" :limit.sync="detail.size"
        @pagination="getdetail" />
    </el-dialog>
  </div>
</template>

<script>
import { treeAny } from '@/api/Region/region'
import { billdetail, billlist, billtotal } from '@/api/supermarket/bill'

export default {
  name: 'index',
  data() {
    return {
      tableData: [],
      flag: false,
      dialogTableVisible: false,
      gridData: [],
      form: {
        countyCityId: 0,
        current: 1,
        mode: "GAIN",
        size: 10,
        yearMonth: ""
      },
      detail: {
        targetCountyCityld: 0,
        current: 1,
        mode: "GAIN",
        size: 10,
        yearMonth: ""
      },
      detailtotal: 0,
      total: 10,
      column: {
        pageSize: 1,
        pageNum: 5
      },
      datalist: {},
      gridList: []
    }
  },
  created() {
    this.getlist()
    this.getGridList()
  },
  methods: {
    // 查寻列表信息
    getlist() {
      billlist(this.form).then(res => {
        this.tableData = res.pageData
        this.total = Number(res.total)
        console.log(res, '数据')
      })
      billtotal().then(res => {
        this.datalist = res
        console.log(res, '数据')
      })
    },
    getfalg(e) {
      console.log(e)
      if (e === 1) {
        this.flag = false
        this.form.mode = 'GAIN'
      } else {
        this.flag = true
        this.form.mode = 'PAY'
      }
      this.getlist()

    },
    //查询网格列表
    getGridList() {
      treeAny().then(response => {
        this.gridList = response
        console.log('网格', this.gridList)
      })
    },
    deleteRow(e) {
      this.detail.mode=this.form.mode
      this.detail.targetCountyCityld = e.countyId
      this.detail.yearMonth = e.yearMonth
      billdetail(this.detail).then(res => {
        this.gridData = res.pageData
      })
      this.dialogTableVisible = true
    },
    getdetail() {
      billdetail(this.detail).then(res => {
        this.gridData = res.pageData
      })
    },
    // 导出
    handle() {

    },
  }
}
</script>

<style>
body {
  background-color: #FFFFFF;
}

.card-text {
  width: 350px;
  height: 90px;
  background: #FFFFFF;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.botten-yes {
  width: 138px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(24, 144, 255, 0.15);
  box-sizing: border-box;
  border-width: 0px 0px 2px 0px;
  border-style: solid;
  border-color: #1890FF;
}

.botten-no {
  width: 138px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-width: 0px 0px 0px 0px;
  border-style: solid;
}
</style>
